<template>
<div>
    <div class="list_header" ref="listheader">
        <div class="header_pensonal">
            <img src="../assets/business/index.png" alt="" @click="goto()">
        </div>
        <!-- <div class="header_filter">
            <div>
                全部
                <img src="../assets/business/arrow_down.png" alt="" >
            </div>
            <div>
                核销
                <img src="../assets/business/arrow_down.png" alt="">
            </div>
        </div> -->
    </div>
    <div class="list_body" :style="{height:fullHeight}">
        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :autoFill="false" :bottom-all-loaded="allLoaded" ref="loadmore">
            <div class="list_body_block" v-for="(item,index) in list" :key="index">
                <div class="list_body_block_line">
                    <span class="font1">会员:</span><span class="font3">{{item.name}}</span>
                    <!-- <div class="font2">{{item.discount}}</div> -->
                    <!-- <div class="font2">{{item.type}}</div> -->
                </div>
                <!-- <div class="list_body_block_line">
                    <span class="font1">卡号:</span><span class="font3">{{item.card_no}}</span>
                </div> -->
                <div class="list_body_block_line">
                    <span class="font1">状态:</span><span class="font3">{{item.status}}</span>
                </div>
                <div class="list_body_block_line">
                    <span class="font1">时间:</span><span class="font3">{{item.time}}</span>
                </div>
            </div>
            <div class="listnodata" v-show="nodata">{{nodataMsg}}</div>
        </mt-loadmore>
    </div>
    <div class="recoder_tel" ref="listfooter">客服电话：0471-888666</div>
</div>

</template>
<script>
import cookie from '../../store/modules/cookie'
export default {
    data(){
        return{
            allLoaded:false,
            topStatus:'',
            fullHeight:'',
            page:1,
            limit:10,
            uid:0,
            nodata:false,
            nodataMsg:"",
            list: []
        }
    },
    mounted(){
        let headerHeight = this.$refs.listheader.offsetHeight
        let listfooter = this.$refs.listfooter.offsetHeight
        this.fullHeight = (document.documentElement.clientHeight-headerHeight-listfooter)+"px";
        console.log(document.documentElement.clientHeight)
    },
    created(){
        let that =this
        this.getlist(1)
    },
    methods:{
        goto(){
            this.$router.push({
                path:'/mindex'
            })
        },
        getlist(page){
            let that = this
            let openid = cookie.getCookie('openid')
            that.$http.get('merchant/index/promotionrecord',{page:page,openid:openid,limit:that.limit}).then((res)=>{
                if(res.code == 0){
                    that.nodata = true
                    if(that.page == 1){
                        that.list = res.data
                    }else{
                        if(res.data.length < that.limit){
                            that.allLoaded = true                            
                        }
                        that.list = that.list.concat(res.data)  
                    }
                }else{
                    if(that.page == 1){
                        that.list = []
                    }
                    that.allLoaded = true
                    that.nodata = true
                    that.nodataMsg = res.msg
                }
            })
        },
        loadTop() {
            this.page = 1
            this.getlist(this.page)
            this.$refs.loadmore.onTopLoaded();
        },
        loadBottom() {
            // 加载更多数据
            this.page++
            this.getlist(this.page)
            this.$refs.loadmore.onBottomLoaded();
        },
    }
}
</script>
<style scoped>
/* 原样式 */
/* .list_header{
    background: url('../assets/business/recordHeader.jpg') no-repeat center center;
    background-size: 100% 100%;
    width: 100%;
    height: 307px;
    padding: 0px;
    box-sizing: border-box;
    top: 0;
} */
.list_header{
    background: url('../assets/business/recordHeader2.jpg') no-repeat center center;
    background-size: 100% 100%;
    width: 100%;
    height: 207px;
    padding: 0px;
    box-sizing: border-box;
    top: 0;
}
.header_pensonal{
    text-align: right;
    padding: 58px 48px;
}
.header_pensonal img{
    width: 74px;
    height: 74px;
}
.header_filter{
    background: #fff;
    height: 100px;
    line-height: 100px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    font-size: 38px;
    color: #231815;
}
.header_filter div{
    flex: 0 0 50%;
    text-align: center;
}
.header_filter img{
    width:23px;
    height: 12px;
    vertical-align: middle;
}
.header_filter div:nth-child(2){
    border-left: 1px solid #918b8a;
}
.list_body{
    background: #EAECED;
    padding:29px 25px;
    /* margin-top: 336px; */
    overflow: scroll;
    box-sizing: border-box;
}
.mint-loadmore-text{
    font-size: 38px;
}
.list_body_block{
    background: #fff;
    padding: 35px 52px;
    margin-bottom: 29px;
    border-radius: 10px;
}

.list_body_block_line{
    height: 60px;
    /* line-height: 60px; */
    font-size: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.font1{
    color: #A1A0A0;
    letter-spacing: 2px;
}
.font2{
    color: #22CFB6;
    font-size: 30px;
    border: 2px solid #22CFB6;
    border-radius: 10px;
    padding:0px  5px;
    float: right;
    margin-left: 20px;
}
.font3{color:#2D2D2D}
.recoder_tel{
    color: #000;
    font-size:30px;
    text-align: center;
    height: 96px;
    background: #EAECED;
}
.listnodata{
    text-align: center;
    height: 96px;
    line-height: 96px;
    font-size: 48px;
}
</style>